<template>
  <div id="details">
    <details-nav-bar class="details-nav" @navbarClick="navbarClick" ref="detailsNav" />
    <scroll class="content" ref="scroll" @scroll="scroll">
      <details-swiper :topImages="topImages" />
      <details-base-info :goods="goods"></details-base-info>
      <details-comment-info ref="comment" :commentInfo="commentInfo"></details-comment-info>
      <details-shop-info :shop="shop"></details-shop-info>
      <details-param-info ref="param" :paramInfo="paramInfo"></details-param-info>
      <details-images-info :imagesInfo="imagesInfo" @imgLoad="imgLoad">
      </details-images-info>
      <goods-list ref="recommend" :showGoods="recommend"></goods-list>
    </scroll>
    <details-bottom-bar class="bottom-bar" @addToCart="addToCart">
    </details-bottom-bar>
  </div>
</template>

<script>
  import DetailsNavBar from './childComponents/DetailsNavBar.vue'
  import DetailsSwiper from './childComponents/DetailsSwiper.vue'
  import { getDetailsData, getRecomment, Goods, Shop, GoodsParams } from 'network/details'
  import DetailsBaseInfo from './childComponents/DetailsBaseInfo.vue'
  import DetailsShopInfo from './childComponents/DetailsShopInfo.vue'
  import Scroll from '@/components/common/scroll/Scroll.vue'
  import DetailsImagesInfo from './childComponents/DetailsImagesInfo.vue'
  import DetailsParamInfo from './childComponents/DetailsParamInfo.vue'
  import DetailsCommentInfo from './childComponents/DetailsCommentInfo.vue'
  import GoodsList from '@/components/content/GoodsList.vue'
  import { debounce } from '@/components/common/debounce/debounce'
  import DetailsBottomBar from './childComponents/DetailsBottomBar.vue'
  export default {
    name: "Details",
    components: {
      DetailsNavBar,
      DetailsSwiper,
      DetailsBaseInfo,
      DetailsShopInfo,
      Scroll,
      DetailsImagesInfo,
      DetailsParamInfo,
      DetailsCommentInfo,
      GoodsList,
      DetailsBottomBar
    },
    data() {
      return {
        iid: null,
        topImages: [], //轮播图
        goods: {}, //商品信息
        shop: {}, //商家信息
        imagesInfo: {}, //详情图片
        paramInfo: {}, //参数信息
        commentInfo: {}, //评论信息
        recommend: [], //推荐信息
        debounceWatch: null,
        navbarSelect:[],
        currentIndex: 0
      }
    },
    // destroyed() {
    //   this.$bus.$off("imageFinish", this.debounceWatch)
    // },
    mounted() {
      // 推荐的列表，解决滚动问题，加入防抖，列表图片加载完了就refresh
      const app = debounce(this.$refs.scroll.refresh, 100)
      this.debounceWatch = () => {
        app()
      }
      // this.$bus.$on("imageFinish", this.debounceWatch)
    },
    created() {
      // 获取用户id
      this.iid = this.$route.params.iid
      // 请求对应数据
      getDetailsData(this.iid).then(res => {
        this.topImages = res.data.result.itemInfo.topImages
        this.goods = new Goods(res.data.result.itemInfo, res.data.result.columns, res.data.result.shopInfo.services)
        this.shop = new Shop(res.data.result.shopInfo)
        this.imagesInfo = res.data.result.detailInfo
        // this.paramInfo = res.data.result.itemParams
        this.paramInfo = new GoodsParams(res.data.result.itemParams.info, res.data.result.itemParams.rule)
        if (res.data.result.rate.cRate !== 0) {
          this.commentInfo = res.data.result.rate.list[0] || {}
        }
      }),
      // 请求推荐信息的数据
      getRecomment().then(res => {
        this.recommend = res.data.data.list
      })
    },
    methods: {
      // 详情的图片加载完了就refresh
      imgLoad() {
        this.$refs.scroll.refresh()
        // 获取offsetTop
        this.navbarSelect.push(0)
        this.navbarSelect.push(this.$refs.comment.$el.offsetTop - 44)
        this.navbarSelect.push(this.$refs.param.$el.offsetTop - 44)
        this.navbarSelect.push(this.$refs.recommend.$el.offsetTop - 44)
        this.navbarSelect.push(Number.MAX_VALUE)
      },
      navbarClick(index) {
        this.$refs.scroll.scroll.scrollTo(0, -this.navbarSelect[index], 300)
      },
      scroll(index) {
        let positionY = -index
        // console.log(this.positionY);
        // 获取四个元素的offsetTop
        this.currentIndex = -index
        for(let i = 0; i< this.navbarSelect.length - 1; i++) {
          if (this.currentIndex !== i && (positionY >= this.navbarSelect[i] && positionY < this.navbarSelect[i+1])) {
            this.currentIndex = i
            this.$refs.detailsNav.currentIndex = this.currentIndex
          }
        }
      },
      addToCart() {
        let product = {}
        // 获取购物车需要的商品信息
        product.iid = this.iid
        product.title = this.goods.title
        product.price = this.goods.realPrice
        product.desc = this.goods.desc
        product.image = this.topImages[0]
        // 添加到Vuex的state的cartList中
        this.$store.dispatch("addProduct", product).then(res => {
          this.$toast.success(res, 1200)
        })
      }
    }
  }
</script>

<style scoped>
  #details {
    position: relative;
    z-index: 10;
    background-color: #fff;
    height: 100vh;
  }
  .content {
    height: calc(100% - 44px - 58px);
  }
  .details-nav {
    position: relative;
    z-index: 10;
    background-color: #fff;
  }
  .bottom-bar {
    background-color: #fff;
  }
</style>